<template>
	<div style="padding:0 37px 0 44px">
		<div class="breadcrumb-father">
      <div class="new-breadcrumb">
        
				<router-link  :to="{path:'/welcome'}">
          <img src="../../../assets/imgs/Home.png" alt="">
        </router-link>
        <!-- <a href="javascript:void(0)">
        </a> -->
          <span>{{$t('index.approval')}}</span>
        <span class="arrow">></span>
        <!-- <a href="javascript:void(0)">
        </a> -->
          <span>{{$t('agent.agentApproval')}}</span>
      </div>
    </div>


		<!-- <Tinymce :height=400 ref="editor" v-model="content"></Tinymce>
		<button @click="showContent"></button> -->

		<div class="card-table">
			<div class="card-table-title">
				<svg aria-hidden="true" class="svg-icon svg-title-icon">
		          <use xlink:href="#icon-dailishangshenhe"></use>
		        </svg>
				<span>{{$t('agent.agentApproval1')}}</span>
			</div>
			<div class="table-border">
				<!-- <div class="table-head">{{$t('agent.agent')}}</div> -->
				<el-table border :data="agentAuditDatas" @cell-mouse-enter="showHandle" @cell-mouse-leave="hiddenHandle" height=500 v-loading="loading" :element-loading-text="$t('button.loading')" element-loading-background="rgba(255, 255, 255, 1)">
					<el-table-column type="index" :label="$t('index.Number')" width="80"></el-table-column>
					<el-table-column prop="name" :label="$t('index.name')" class-name="title_name"></el-table-column>
					<el-table-column prop="address" :label="$t('agent.Address')"></el-table-column>
					<el-table-column prop="parentName" :label="$t('search.UpperLevel')"></el-table-column>
					<el-table-column prop="checkType" :label="$t('mer.ApprovalItem')" :formatter="AgentState"></el-table-column>
					<el-table-column fixed="right" class-name="handle-hidden-1 animate_td">
					    <template slot-scope="scope">
		                  <a class="svg-link-class" @click="showAgentDetails(scope.row.id,scope.row.name,scope.row.grade)">
		                    <svg aria-hidden="true" class="svg-icon svg-action-icon">
		                      <use xlink:href="#icon-shenhe"></use>
		                    </svg>
		                  </a>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>
		<div class="pagination-container">
			<el-pagination @size-change="handleSizeChange" background @current-change="handleCurrentChange" :current-page.sync="searchAgentData.page" :page-sizes="[15,20,30,50]" :page-size="searchAgentData.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="res.total"></el-pagination>
		</div>
		
	</div>
</template>

<script>
import {
  agentAll,
  agentDetails,
  updateStateAgent
} from "api/audit/agentAudit/index";
// import { auditDetails } from 'views/z_auditManage/componenets'
import Tinymce from "components/Tinymce";
export default {
  name: "agentAudit",
  components: { Tinymce },
  data() {
    return {
      distributorId: null, //传递给子组件的值  代理商ID id
      agentAuditDatas: [], //后台返回的待审核代理商数据
      res: [], //分页 数据总条数
      searchAgentData: {
        //查询参数
        page: 1,
        pageSize: 15
      },
      tableIndex: null,
      oldPage: null,
      loading: true,
    };
  },
  watch:{
    'searchAgentData.page':function(newVal,oldVal){
        this.oldPage = oldVal;
    },
  },
  created() {
    if(localStorage.getItem('searchAgentData')){
      this.searchAgentData = JSON.parse(localStorage.getItem('searchAgentData'));
    }

    this.agentAuditList(this.searchAgentData);
    $("#z_auditManage .el-menu a li:eq(2)").addClass("is-active");
  },
  methods: {
    // showContent(){
    //   console.log(this.content);
    // },
    showHandle(row, column, cell, event) {
      for (let i = 0; i < this.agentAuditDatas.length; i++) {
        if (this.agentAuditDatas[i].id === row.id) {
          this.tableIndex = i;
          const table_row = $(".el-table__fixed-right").find(".el-table__row")[i];
          $(table_row).find("td:last").removeClass("handle-hidden-1");
          // $(".animate_td .cell").css("right","-120px");

          $(".el-table__fixed-right").addClass("fixed-column-1");
          // 判断项目数目是否导致滚动条出现
          if (this.agentAuditDatas.length <= 15) {
            $(".el-table__fixed-right").addClass("right-zero");
          } else {
            $(".el-table__fixed-right").removeClass("right-zero");
          }
          $(".el-table__fixed-right").css("z-index", "22");
          var action_div = $(table_row).find("td:last").children("div");
          $(action_div).stop().animate({ right: "0" });
        }
      }
    },
    hiddenHandle(row, column, cell, event) {
      const table_row = $(".el-table__fixed-right").find(".el-table__row")[this.tableIndex];
      $(".el-table__fixed-right").css("z-index", "0");
      var action_div = $(table_row).find("td:last").children("div");
      $(action_div).stop().animate({ right: "-120px" });
    },
    AgentState(row) {
      let checkType = row.checkType;
      if (checkType === "进件") {
        return (checkType = this.$t("mer.Registration"));
      } else if (checkType === "修改信息") {
        return (checkType = this.$t("mer.Amendment"));
      }
    },
    //获取待审核代理商列表
    agentAuditList(value,str) {

      const _that = this;

      _that.loading = true;

      if( str == 'CurrentChange' ){
        // 获取所有分页项数，循环去除选中样式，对点击前的项数添加选中样式
        let obj = $('.el-pager .number');
        for( let i = 0; i < obj.length; i++){
            if($(obj[i]).html() == this.oldPage) {
              $(obj[i]).addClass('active');
            } else {
              $(obj[i]).removeClass('active');
            }
        }
      }

      value.companyId = localStorage.getItem("companyId");
      value.distributorId = localStorage.getItem("distributorId");
      agentAll(value).then(res => {
        // console.log(res);
        this.agentAuditDatas = res.value.list;
        this.res = res.value;

        // 如果是分页触发，循环去除选中样式，对点击后的项数添加选中样式
        if( str == 'CurrentChange' ){
          let obj = $('.el-pager .number');
          for( let i = 0; i < obj.length; i++){
              if($(obj[i]).html() == this.searchAgentData.page) {
                $(obj[i]).addClass('active');
              } else {
                $(obj[i]).removeClass('active');
              }
          }
        }

        setTimeout(function(param) {
          const td_last_child = $(".el-table__body-wrapper tr td:last-child");
          for (let i = 0; i < td_last_child.length; i++) {
            $(td_last_child[i]).removeClass("handle-hidden-1");
          }

          const title_name_arr = $(".el-table__body-wrapper .title_name .cell");
          for (let j = 0; j < title_name_arr.length; j++) {
            $(title_name_arr[j]).attr("title", $(title_name_arr[j]).html());
          }

          _that.loading = false;
          
        }, 500);
      });
    },
    // 判断字符串长度的方法
    getStrL(str) {
      let l = str.length;
      let blen = 0;
      for (let i = 0; i < l; i++) {
        if ((str.charCodeAt(i) & 0xff00) != 0) {
          blen++;
        }
        blen++;
      }
      return blen;
    },
    //进入子组件 显示子组件详情
    showAgentDetails(id, name, grade) {
      this.distributorId = id;
      localStorage.setItem('searchAgentData',JSON.stringify(this.searchAgentData));
      this.$router.push({ path: "/agentAuditDetails", query: { disId: id, name: name, grade: grade } });
    },
    //pageSize 改变时会触发
    handleSizeChange(val) {
      // this.$router.push({ path: "/agentAudit", query: { page: this.searchAgentData.page, pageSize: val } });
      this.searchAgentData.pageSize = val;
      this.agentAuditList(this.searchAgentData);
    },
    //currentPage 改变时会触发
    handleCurrentChange(val) {
      // this.$router.push({ path: "/agentAudit", query: { page: val, pageSize: this.searchAgentData.pageSize } });
      this.searchAgentData.page = val;
      this.agentAuditList(this.searchAgentData,'CurrentChange');
    }
  }
};
</script>

<style>
</style>